<template>
	<view class="page">
		<view class="top-card">
			<view class="user-box">
				<view class="username">{{merchantInfo.merchantName || ""}}</view>
				<uni-tag text="切换" type="success" @click="handleShowUserDrawer"/>
			</view>
			<view class="margin-top-30">
				<uni-row>
					<uni-col :span="12">
						<view class="flex-column-around height-160">
							<view class="font-num">
								{{merchantInfo.stateList.todayTrade || "0.00"}}
							</view>
							<view class="font-sm">
								今日交易额
							</view>
						</view>
					</uni-col>
					<uni-col :span="12">
						<view class="flex-column-around height-160">
							<view class="font-num">
								{{merchantInfo.stateList.monthTrade || "0.00"}}
							</view>
							<view class="font-sm">
								本月交易额
							</view>
						</view>
					</uni-col>
				</uni-row>
			</view>
			<view class="margin-top-30">
				<uni-row>
					<uni-col :span="6">
						<view class="flex-column-around height-120" data-search="online" @click="toMachine">
							<view class="font-num">
								{{merchantInfo.stateList.machineStateList.online || 0}}
							</view>
							<view class="font-sm">
								在线
							</view>
						</view>
					</uni-col>
					<uni-col :span="6">
						<view class="flex-column-around height-120" data-search="outline" @click="toMachine">
							<view class="font-num">
								{{merchantInfo.stateList.machineStateList.offline || 0}}
							</view>
							<view class="font-sm">
								离线
							</view>
						</view>
					</uni-col>
					<uni-col :span="6">
						<view class="flex-column-around height-120" data-search="fail" @click="toMachine">
							<view class="font-num">
								{{merchantInfo.stateList.machineStateList.fault || 0}}
							</view>
							<view class="font-sm">
								故障
							</view>
						</view>
					</uni-col>
					<uni-col :span="6">
						<view class="flex-column-around height-120" data-search="outStock" @click="toMachine">
							<view class="font-num">
								{{merchantInfo.stateList.machineStateList.outStock || 0}}
							</view>
							<view class="font-sm">
								缺货
							</view>
						</view>
					</uni-col>
				</uni-row>
			</view>
		</view>
		<!-- <uni-notice-bar show-icon text="您有0条待办事务" background-color="#ffaa00" color="#fff"/> -->
		<uni-grid :column="3" :showBorder="false" :highlight="false" @change="toNext">
			<uni-grid-item v-for="(item, index) in gridList" :index="index" :key="index" v-if="item.hidden.indexOf(userType) < 0">
				<view class="flex-column-around grid-item-box">
					<uni-icons :type="item.icon" :size="40" color="#00aaff" />
					<text class="text">{{item.title}}</text>
				</view>
			</uni-grid-item>
		</uni-grid>
		<user-list-drawer ref="userListDrawer" :list="merchantList" @changeMerchant="getMerchantInfo"></user-list-drawer>
	</view>
</template>

<script>
	import UserListDrawer from "@/components/UserListDrawer"
	
	export default {
		
		components: {
			UserListDrawer
		},
		
		data() {
			return {
				gridList: [
					{
						icon: 'scan',
						title: '扫码',
						hidden: []
					},
					{
						icon: 'gift-filled',
						title: '商品',
						hidden: []
					},
					{
						icon: 'fire-filled',
						title: '统计',
						hidden: ['2']
					},
					{
						icon: 'list',
						title: '订单',
						hidden: ['2']
					},
					{
						icon: 'wallet-filled',
						title: '钱包',
						hidden: ['2']
					},
					{
						icon: 'info-filled',
						title: '投诉',
						hidden: ['2']
					},
					{
						icon: 'videocam-filled',
						title: '审核',
						hidden: ['2']
					}
				],
				userType: "",
				merchantInfo: {},
				merchantList: []
			}
		},
		
		onShow() {
			let uid = uni.getStorageSync('uid');
			if(!uid) {
				uni.reLaunch({
					url:'/pages/user/login'
				})
			}
			
			this.userType = uni.getStorageSync('userType')
						
			this.getMerchantInfo()
		},
		
		methods: {
			getMerchantInfo() {
				let mid = uni.getStorageSync('mid')
				
				uni.showLoading({
					title:'加载中...'
				})
				
				uni.request({
					url: getApp().globalData.apiUrl + '/card/api/v1/getMerchantDetail',
					data: {
						merchantId: mid
					},
					success: res => {
						if(res.data.success) {
							this.merchantInfo = {
								merchantName: uni.getStorageSync('mname'),
								stateList: res.data.result
							}
							uni.hideLoading()
						} else {
							uni.showToast({
								icon:'error',
								title: res.data.message
							})
						}
					}
				})
			},
			
			handleShowUserDrawer() {
				uni.request({
					url: getApp().globalData.apiUrl + '/card/api/v1/getUserInfo',
					data: {
						phone: uni.getStorageSync('phone')
					},
					success: res => {
						if(res.data.success) {
							let merchantList = res.data.result.merchantList.map( item => {
								return {
									id: item.merchantId,
									name: item.merchantName
								}
							})
							if(merchantList.length > 0) {
								this.merchantList = merchantList
								this.$refs.userListDrawer.show()
							} else {
								uni.showToast({
									icon:'error',
									title:'未找到角色',
									duration: 2000
								})
							}
						} else {
							uni.showToast({
								icon:'error',
								title: res.data.message
							})
						}
					}
				})
			},
			
			formatURLData (data) {
				const tempArray = data.split('?')
				const searchQuery = tempArray[1]
				if (!searchQuery || typeof searchQuery !== 'string') return
				const result = {}
				searchQuery.split('&').forEach(item => {
					const tmp = item.split('=')
					result[tmp[0]] = tmp[1]
				})
				return result
			},
			
			
			toNext({ detail }) {
				let selected = detail.index
				let that = this
			
				switch( selected ) {
					case 0: 
						uni.scanCode({
							scanType: 'qrCode',
							success: function (res) {
								let params = that.formatURLData(res.result);
								if(params.hasOwnProperty('mid')) {
									that.getMachineInfo(params.mid)
								} else {
									uni.showToast({
										icon: 'error',
										title: '未识别设备'
									})
								}
							}
						});
					break;
					case 1: 
						uni.navigateTo({
							url: '/pages/goods/index'
						})
					break;
					case 2:
						uni.navigateTo({
							url: '/pages/statistics/index'
						})
					break;
					case 3: 
						uni.navigateTo({
							url: '/pages/order/index'
						})
					break;
					case 4: 
						uni.navigateTo({
							url: '/pages/wallet/index'
						})
					break;
					case 5: 
						uni.navigateTo({
							url: '/pages/complain/index'
						})
					break;
					case 6:
						uni.navigateTo({
							url: '/pages/order/wait'
						})
					break;
				}
			},
			
			getMachineInfo(mid) {
				uni.request({
					url: getApp().globalData.apiUrl + '/card/api/v1/getMachineDetail',
					data: {
						mid: mid
					},
					success: res => {
						if(res.data.success) {
							let machineId = res.data.result.id
							uni.navigateTo({
								url: `/pages/stock/replenish?machineId=${machineId}`
							})
						} else {
							uni.showToast({
								icon:'error',
								title: '设备不存在'
							})
						}
					}
				})
			},
			
			toMachine(e) {
				let search = e.currentTarget.dataset.search
				
				let defaultSearch = {
					networkStatus: "",
					machineStatus: "",
					outStockRate: 0
				}
				
				switch( search ) {
					case 'online' : 
						defaultSearch.networkStatus = 1
					break;
					case 'outline' :
						defaultSearch.networkStatus = 2
					break;
					case 'fail' : 
						defaultSearch.machineStatus = 2
					break;
					case 'outStock' : 
						defaultSearch.outStockRate = 10
					break;
				}
				
				uni.setStorageSync('searchMachine', JSON.stringify(defaultSearch))
				
				uni.switchTab({
					url: '/pages/machine/index'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		background-color: #fff;
	}
	
	.top-card {
		background-color: #00aaff;
		color: #fff;
		padding: 30rpx;
	}
	
	.user-box {
		display: flex;
		justify-content: space-between;
	}

	.height-160 {
		height: 160rpx;
	}
	
	.height-120 {
		height: 120rpx;
	}
	
	.font-sm {
		font-size: 26rpx;
	}
	
	.font-num {
		font-size: 40rpx;
	}
	
	.text {
		font-size: 28rpx;
		color: #777;
	}
	
	.grid-item-box {
		flex: 1;
		padding: 35rpx 0;
		background-color: #fff;
	}
</style>
